<template>
  <div>
    <city-header></city-header>
    <city-search :cities="cities"></city-search>
    <city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>
    <!--handleLetterChanger 事件是子组件返回的-->
    <city-alphabet :cities="cities" @change="handleLetterChanger"></city-alphabet>
  </div>

</template>

<script>

  import CityHeader from './components/Header.vue'
  import CitySearch from './components/Search.vue'
  import CityList from './components/List.vue'
  import CityAlphabet from './components/Alphabet.vue'
  // 引入ajax
  import axios from 'axios'

  export default {
    name: 'City',
    components: {
      CityHeader,
      CitySearch,
      CityList,
      CityAlphabet,
    },
    data(){
      return {
          cities: {},
          hotCities: [],
          letter: '',
      }
    },
    methods: {
      getCityInfo() {
        axios.get('api/city.json').then(this.handleGetCityInfoSucc)
      },
      handleGetCityInfoSucc(res){
          res = res.data
          if (res.ret && res.data){
            const data = res.data
            this.cities = data.cities
            this.hotCities = data.hotCities
          }
      },
      //点击ABC这些字母的时候
      handleLetterChanger(letter){
        this.letter = letter;
      }
    },
    mounted () {
      this.getCityInfo()
    }
  }
</script>


<style scoped lang="stylus">

</style>
